<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="ul" qwe="sdf">
        我是ul的文字，不是li标签-1
        <!-- 每一个元素(元素、空格、注释、内容、属性)都视为一个节点 -->
        <li class="li1">li-1</li>
        我是ul的文字，不是li标签-2
        <li>li-2</li>
        <!-- 每一个元素(元素、空格、注释、内容、属性)都视为一个节点 -->
        我是ul的文字，不是li标签-3
        <li>
            <!-- 啦啦啦 -->
            li-3
        </li>
        <li>li-4</li>
        <li>li-5</li>
    </ul>

    <p class="p1" title="ppp" att="hhh">我是一段文字</p>

    <script>
        // 获取两个元素
        var ul = document.querySelector('.ul');
        var li = document.querySelector('.li1');

        // 看看节点之间的关系
        // console.log(li);
        // console.log(li.parentNode); // li的父节点
        console.log(ul.childNodes); // 返回的是节点 节点包括文本、子元素、注释等
        console.log(ul.children); // 只返回子元素
        console.log(ul.firstChild); // 返回的是第一个子节点是当前元素的文本
        console.log(ul.firstElementChild); // 返回的是第一个子元素
        console.log(ul.getAttributeNode('qwe')); // 获取标签的属性和属性值
        // nodeName：获取节点的名称，比如获取节点是什么标签
        // nodeValue：节点值，比如 获取p标签包裹的内容
        // nodeType：节点类型，有不同的数值对应不同的节点类型

        var node1 = ul.firstChild; // ul的第一个子节点
        var node2 = ul.firstChild.nextSibling // 第一个字节点的下一个节点
        console.log(node2.nodeName);
        console.log(node2.nodeValue);
        console.log(node2.nodeType);

        // ======== 操作属性值 ========
        var p = document.querySelector('.p1');
        console.log(p.getAttribute('att'));
        console.log(p.getAttribute('title'));
        // 修改已有的属性
        p.setAttribute('att', 'www')
        p.setAttribute('title', '啦啦啦')
        // 新增一个属性
        p.setAttribute('time', '2023')
        // 删除
        p.removeAttribute('title');
        // p.className = 'p1 p2 aaa' // 操作class
    </script>
</body>

</html>